<template>
  <div class="sider-wrap">
    <a-menu
      theme="dark"
      mode="inline"
      v-model:selectedKeys="selectedKeys"
      v-model:openKeys="openKeys"
      :inlineCollapsed="false"
    >
      <component
        :key="item.name"
        v-for="item in menus"
        :is="itemComponent(item)"
        @titleClick="clickSubkMenu"
        :class="{ 'index-class': item.name === 'Index' }"
      >
        <template v-if="!item.children">
          <router-link :to="item.path ? item.path : ''" custom v-slot="{ navigate }">
            <div @click="navigate">
              <!-- <AreaChartOutlined /> -->
              <!-- <component :is="AreaChartOutlined" key="item.meta.icon" class="icon-menu" /> -->
              <span>{{ t(`menu.${item.name}`, { kongge: '&nbsp;' }) }}</span>
            </div>
          </router-link>
        </template>
        <template v-if="item.children" #title>
          <div>
            <span>{{ t(`menu.${item.name}`) }}</span>
          </div>
        </template>
        <template #icon>
          <component :is="iconData[item.meta.icon]" key="item.meta.icon" class="icon-menu" />
          <!-- <component :is="item.meta.icon" key="item.meta.icon" class="icon-menu" /> -->
        </template>
        <component :key="child.name" v-for="child in item.children" :is="itemComponent(child)">
          <router-link :to="child.path ? child.path : ''" custom v-slot="{ navigate }">
            <div @click="navigate">
              <span>{{ t(`menu.${child.name}`) }}</span>
            </div>
          </router-link>
        </component>
      </component>
    </a-menu>
  </div>
</template>
<script setup lang="ts">
  ///{{{import}}}
  import { reactive, computed, watchEffect } from 'vue';
  import { useStore } from 'vuex';
  import { useRouter } from 'vue-router';
  import { useI18n } from 'vue-i18n';
  ///{{{iconData}}}
  const getMenu = (val) => {
    if (val.name !== null && val.name !== undefined) {
      let name = val.name;
      if (val.name.match('_')) {
        let nameArr = val.name.split('_');
        name = nameArr[nameArr.length - 1];
      }
      selectedKeys.splice(0, 1);
      openKeys.splice(0, 1);
      selectedKeys.push(name);
      openKeys.push(val.meta.parent_name);
    }
  };
  const selectedKeys = reactive<any[]>([]);
  const openKeys = reactive<any[]>([]);
  const store = useStore();
  let menus = computed(() => store.getters.menus);

  const router = useRouter();
  // let curRoute = router.currentRoute.value;
  const { t } = useI18n();
  watchEffect(() => getMenu(router.currentRoute.value));
  // function changeMode(checked) {
  //   mode.value = checked ? 'vertical' : 'inline';
  // }
  // function changeTheme(checked) {
  //   theme.value = checked ? 'dark' : 'light';
  // }
  const itemComponent = (val) => {
    if (!val.children) {
      return 'AMenuItem';
    } else {
      return 'ASubMenu';
    }
  };
  const clickSubkMenu = ({ key }) => {
    if (key === openKeys[0]) {
      openKeys.splice(0, 1);
    } else {
      openKeys.splice(0, 1);
      openKeys.push(key);
    }
    //必须push两次才能打开,,不知道原因
    openKeys.push(key);
  };
</script>
<style lang="less" scoped>
  .sider-wrap {
    overflow-y: auto;
    height: calc(100vh - 260px);

    span,
    .anticon {
      font-size: 15px;
    }
  }

  .index-class div {
    padding-left: 0 !important;
  }
</style>
